<template>
    <el-table :data="pagedData" style="width: 100%" :empty-text="'暂无信息'">
        <el-table-column prop="recAddress" label="关联地址" />
        <el-table-column prop="recName" label="关联人" />
        <el-table-column prop="recPhone" label="关联电话" />
        <el-table-column prop="goodsName" label="商品名称" />
        <el-table-column prop="lastActiveTime" label="最近活跃时间" />
        <el-table-column prop="creationTime" label="创建时间" />
    </el-table>
    <div class="pagination">
    <el-pagination
        layout="prev, pager, next, jumper, total"
        :total="data.length"
        :page-size="pageSize"
        v-model:current-page="currentPage"
        background
    />
    </div>
</template>

<script setup>
const data = ref([]);
const currentPage = ref(1);
import { ref, watch, computed } from "vue";
const props = defineProps(["data"]);

watch(() => props.data, info => {
    data.value = info || [];
}, { immediate: true });
const pageSize = ref(5);

const pagedData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    return data.value.slice(start, start + pageSize.value);
});
</script>

<style>
.pagination {
    display: flex;
    justify-content: center;
    padding: 10px;
}
</style>